import * as React from "react";
import { DatePicker, List } from "antd-mobile";
import formcontext from '../form';
import Required from "../Required";

const mode = {
  date: "date",
  datetime: "datetime",
  time: "time",
};
export default (props) => {
  const key = props["data-key"];
  const form = React.useContext(formcontext);
  const { getFieldDecorator } = form;
  const { node } = props;
  const { required } = node.data;
  const { timeFormat, dateFormat } = node.data.timeFormat;
  const labelText = node.data.label;
  let temp = mode.date;
  if (timeFormat && dateFormat) {
    temp = mode.datetime;
  } else if (timeFormat && !dateFormat) {
    temp = mode.time;
  }
  return(
    <>
    {getFieldDecorator(node.data.column)(
      <DatePicker
        data-key={key} 
        mode={temp}
        {...props}
      >
        <List.Item
          style={{
            borderBottom: "1px solid #E6E6E6",
          }} 
          arrow="horizontal"
        >{labelText || '出发日期'}{required ? <Required /> : null}
        </List.Item>
      </DatePicker>
    )}
    </>
  );
};
